<template>
  <com-page class="com-spacing com-color-content-bg">
    <u-navbar :title="$t('pages_account_forget_forget_msg_0719aa2b')" autoBack fixed placeholder />

    <view>
      <view class="com-mt-md com-flex com-justify-between">
        <text>手机号</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_forget_forget_msg_6e4f4b33')" v-model="form.phone" type="number" border="none" clearable />
      </view>
      <view class="com-mt-xxl com-flex com-justify-between">
        <text>新密码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_forget_forget_msg_abdd7ea8')" v-model="form.password" border="none" :password="!isShowPassword" clearable>
          <com-icon :name="isShowPassword ? 'eye' : 'eye-off'" @click="onSetEyeHide" slot="suffix" />
        </u-input>
      </view>
      <view class="com-mt-xxl com-flex com-justify-between">
        <text>验证码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_forget_forget_msg_d0c06a0d')" v-model="form.code" border="none" type="number" clearable>
          <view class="com-color-tips" @click="onSendCode" slot="suffix">{{
            countdown === 0 ? '获取验证码' : countdown + '后重新获取'
          }}</view>
        </u-input>
      </view>
    </view>

    <u-button type="primary" class="com-mt-xxl">重置密码</u-button>
  </com-page>
</template>

<script>
export default {
  name: 'App-Login',
  data() {
    return {
      form: {},
      isShowPassword: false,
      isPhoneLogin: false,
      countdown: 0,
    }
  },
  methods: {
    onSetEyeHide() {
      this.isShowPassword = !this.isShowPassword
    },
    changeType() {
      this.isPhoneLogin = !this.isPhoneLogin
    },
    onSendCode() {
      if (this.countdown === 0) {
        this.countdown = 60
        setInterval(() => {
          this.countdown -= 1
        }, 1000)
      }
    },
  },
}
</script>

<style scoped lang="scss"></style>
